<template>
  <div class="coupon">
    <div class="discount">
        <div class="discount-title clearfix">
          <router-link
          to="/" tag="span"
          class="mui-icon mui-icon-arrowleft"></router-link>
          <h2 class="">优惠券</h2>
        </div>
    </div>
    <div class="container">
      <ul>
        <li v-for="(item , index) in titleList" :key="index" @click="handleClick(item.couponTitle)">
          <router-link :to="'/couponYH/couponid='+item.couponId" tag="a">
            <img :src="item.couponImg" alt="11">
            <p>{{item.couponTitle}}</p>
          </router-link>
        </li>
      </ul>
    </div>
    <mm-footer></mm-footer>
  </div>
</template>
<script>
import mmFooter from "./publicComponents/mmFooter.vue"
import mui from '../lib/mui/js/mui.min.js'
export default {
  data() {
    return {
      titleList: [],
    }
  },
  created() {
    this.getDiscountTitle()
  },
  mounted() {
  },
  methods: {
    getDiscountTitle() {
      this.$http.get('api/getcoupon').then((res) => {
        this.titleList = res.body.result
        // console.log(this.titleList)
      })
    },
    handleClick(couponTitle) {
      this.$store.commit('addCouponTitle',couponTitle)
      // console.log(this.$store.state.couponTitle)
    }
  },
  components: {
    mmFooter
  }
}
</script>
<style lang="less" scoped>
@import "../../src/less/var";
.coupon{
  touch-action: pan-y;
  .discount-title {
    height: 98 / @base;
    padding: 10 / @base 15 / @base;
    background-color: #ff9e20;
    position: relative;
    h2 {
      font-size: 28 / @base;
      height: 100%;
      line-height: 70 / @base;
      margin: 0;
      text-align: center;
      margin: 0 auto;
    }
    span {
      font-size: 40 / @base;
      height: 100%;
      line-height: 70 / @base;
      position: absolute;
      left: 20/@base;
    }
  }
  .container {
    ul {
      // display: flex;
      // flex-wrap: wrap;
      // justify-content: space-evenly;
      padding: 10/@base 0;
      text-align: left;
      li {
        width: 31%;
          display: inline-block;
          border: 1px solid #ccc;
          text-align: center;
          margin-left: 12/@base;
          margin-top: 12/@base;
        a {
          display: block;
          img {
            width: 100/@base;
            height: 100/@base;
            margin: 10/@base auto;
          }
          p {
            font-size: 24/@base;
            margin-bottom: 8/@base;
            color: #000;
          }
        }
      }
    }
  }
}
</style>
